<template>
	<view class="uni-padding-wrap uni-common-pb">
		<view class="uni-card" v-for="(list,index) in lists" :key="index">
			<view class="uni-list">
				<view class="uni-list-cell uni-collapse">
					<view class="uni-list-cell-navigate uni-navigate-right" hover-class="uni-list-cell-hover" @click="goDetailPage(list.url)">
						{{list.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				lists: [{
						name: "Badge 数字角标",
						url: "badge"
					},
					{
						name: "Calendar 日历",
						url: "calendar"
					},
					{
						name: "Card 卡片",
						url: "card"
					},
					// #ifdef H5 || APP-PLUS || MP-WEIXIN 
					{
						name: "Collapse 折叠面板",
						url: "collapse"
					},
					// #endif 
					{
						name: "CountDown 倒计时",
						url: "count-down"
					},
					{
						name: "Drawer 抽屉",
						url: "drawer"
					},
					{
						name: "Fab 悬浮按钮",
						url: "fab"
					},
					{
						name: "Grid 宫格",
						url: "grid"
					},
					{
						name: "Icon 图标",
						url: "icon"
					},
					// #ifndef MP-BAIDU 
					{
						name: "IndexedList 索引列表",
						url: "indexed-list"
					},
					// #endif 
					{
						name: "List 列表",
						url: "list"
					},
					{
						name: "LoadMore 加载更多",
						url: "load-more"
					},
					{
						name: "NavBar 自定义导航栏",
						url: "nav-bar"
					},
					{
						name: "NoticeBar 通告栏",
						url: "notice-bar"
					},
					{
						name: "NumberBox 数字输入框",
						url: "number-box"
					},
					{
						name: "Pagination 分页器",
						url: "pagination"
					},
					{
						name: "PopUp 弹出层",
						url: "popup"
					},
					{
						name: "Rate 评分",
						url: "rate"
					},
					{
						name: "SegmentedControl 分段器",
						url: "segmented-control"
					},
					{
						name: "Steps 步骤条",
						url: "steps"
					},
					{
						name: "SwipeAction 滑动操作",
						url: "swipe-action"
					},
					{
						name: "SwiperDot 轮播图指示点",
						url: "swiper-dot"
					},
					{
						name: "Tag 标签",
						url: "tag"
					},
					{
						name: "横向选项卡",
						url: "wuc-tab"
					},
					{
						name: "日期时间三级联动",
						url: "w-picker"
					},
					{
						name: "mescroll -支持uni-app的下拉刷新上拉加载组件"
					},
					{
						name: "QS-inputs组件 自动化获取用户输入信息，类型、初始值、取值、布局、动画可由后端接口动态决定"
					},
					{
						name: "搜索框组件-设置搜索框的样式"
					},
					{
						name: "sl-filter 条件筛选组件 下拉的条件筛选"
					},
					{
						name: "二维码生成器"
					},
					{
						name: "自定义 Modal 组件---登陆的模态框等"
					},
					{
						name: "易用的头像裁剪上传、头像美化组件"
					},
					{
						name: "NoticeBar 通告栏（滚动公告）等"
					},
					{
						name: "3D轮播"
					},
					{
						name: "Steps 步骤条"
					},
					{
						name: "图片选择上传"
					},
					{
						name: "uParse 富文本解析"
					},
					{
						name: "yu-phone-directory城市搜索,通讯录搜索"
					},
					{
						name: "DatePicker 多时间粒度选择器组件"
					},
					{
						name: "弹出框Dialog"
					},
					{
						name: "省市区三级联动组件 后带对勾"
					},
					{
						name: "TABS滑动切换插件，卡片切换"
					},
					{
						name: "基于uni-app的搜索页面，带历史搜索记录"
					},
					{
						name: "glance顶吸滑动导航栏"
					},
					{
						name: "开箱即用的公共搜索组件（历史记录，app语音输入，搜索推荐）"
					},
					{
						name: "t-table 表格"
					},
					{
						name: "tab切换(超出滚动，未超出平均分配)"
					},
					{
						name: "图片选择(选取图片，图片预览，图片删除,图片转base64 支持h5)"
					},
					{
						name: "列表过滤、排序通用组件"
					},
					{
						name: "cmd-progress进度条组件"
					},
					{
						name: "cmd-nav-bar导航栏组件(顶部导航)"
					},
					{
						name: "画廊(ynGallery)组件(有点像滑动轮播)"
					},
					{
						name: "底部弹起picker组件(三级联动等)"
					},
					{
						name: "下拉列表"
					},
					{
						name: "w-loading加载动画"
					},
					{
						name: "5+ APP地图基础版(非自定义组件模式)"
					},
					{
						name: "城市选择组件"
					},
					{
						name: "choose-Cade下拉选择器进行排序"
					},
					{
						name: "简易富文本编辑器"
					},
					{
						name: "6位数字支付密码插件"
					},
					{
						name: "request网络请求，支持拦截器，支持回调函数和Promise, 支持typescript-第七页"
					},
					{
						name: "图片上传组件"
					},
					{
						name: "Pagination 分页器"
					},
					{
						name: "图片懒加载（可自定义）"
					},
					{
						name: "single-table,一个uniapp的简单table"
					},
					{
						name: "QS-picker三级联动弹出选择框"
					},
					{
						name: "基于uni-app 单数组 分段切换"
					},
					{
						name: "省市区三级联动"
					},
					{
						name: "顶部信息提示组件"
					},
					{
						name: "3d轮播图"
					},
					{
						name: "cmd-bottom-nav底部导航栏组件"
					},
					{
						name: "输入内容的弹出框"
					},
					{
						name: "轮播图 全屏/卡牌"
					},
					{
						name: "封装ColorUI卡片视图样式，支持预览图片及徽标、跳转详情"
					},
					{
						name: "仿京东收货地址选择组件，包含淘宝"
					},
					{
						name: "glance商品列表（修复页面超宽）"
					},
					{
						name: "一个简单的popup弹层组件侧面"
					},
					{
						name: "自定义导航栏"
					},
					{
						name: "简单的模态框组件----暂时看到这"
					},
					{
						name: "弹框，安卓的不是很美观，重新写的弹框"
					},
					{
						name: "评价列表"
					},
					{
						name: "表单生成组件"
					},
					{
						name: "优惠券小组件"
					},
					{
						name: "Android 文件选择器(只支持Android 平台)"
					},
					{
						name: "浮动键盘"
					},
					{
						name: "右下角加号（点击弹出小图标（带动画））"
					},
					{
						name: "小程序自定义导航栏"
					},
					{
						name: "商品列表"
					},
					{
						name: "popup 可从 top，bottom，left，right 四个方向滑出"
					},
					{
						name: "图片验证码"
					},
					{
						name: "图片懒加载、预加载"
					},
					{
						name: "可以拖动缩放的头像截取组件"
					},
					{
						name: "文字输入时自动提示补全，支持中英文自动提示"
					},
					{
						name: "自定义多项与单项选择器"
					},
					{
						name: "瀑布流布局(两列布局)"
					},
					{
						name: "APP版本检测升级"
					},
					{
						name: "区间选择滑块组件"
					},
					{
						name: "一个3D的炫酷的图片轮播展示组件-13页"
					},
					{
						name: "滑动tab选项卡"
					},
					{
						name: "日期时间选择组件"
					},
					{
						name: "通告消息展示组件包含无缝滑动，滚动模式，单行和多行消息展示"
					},
					{
						name: "弹出层登陆插件"
					},
					{
						name: "生成卡片/卡片分享"
					},
					{
						name: "图片拖拽排序插件（九宫格模式）"
					},
					{
						name: "声音录制"
					},
					{
						name: "可滑动的侧滑菜单"
					},
					{
						name: "图片上传组件-生成文件地址和Base64"
					},
					{
						name: "图片上传七牛插件"
					},
					{
						name: "cmd-icon图标组件-可自行扩展字体图标库"
					},
					{
						name: "微信小程序前端获取openId"
					},
					{
						name: "日期区间picker"
					},
					{
						name: "swiper-banner轮播图banner "
					},
					{
						name: "图片放大器"
					},
					{
						name: "一个增强版的抽屉菜单"
					},
					{
						name: "Font-Awesome 图标"
					},
					{
						name: "页面等待加载图标与动画组件"
					},
					{
						name: "wsure-load-more分页加载插件"
					},
					{
						name: "drag-sort拖拽排序组件"
					},
					{
						name: "日历组件"
					},
					{
						name: "可拖拽_悬浮球"
					},
					{
						name: "弧形进度条(不支持h5)"
					},
					{
						name: "async-validator表单校验"
					},
					{
						name: "车牌选择键盘"
					},
					{
						name: "数字LED时间屏显"
					},
					{
						name: "进度环-app端"
					},
					{
						name: "支付密码输入组件,数字小键盘输入"
					},
					{
						name: "lzui - 数字调节器"
					},
					{
						name: "多选日历，日期组件-16页"
					},
					{
						name: "cat-label表单验证,图片预览"
					},
					{
						name: "LuBarTabNav--选项卡导航栏"
					},
					{
						name: "访支付宝密码输入框"
					},
					{
						name: "H5生成海报附带二维码"
					},
					{
						name: "Canvas绘制图片助手"
					},
					{
						name: "简单的日期时间选择器"
					},
					{
						name: "弹出层组件popup（新增定义宽高百分比(默认自适应)）"
					},
					{
						name: "定位附近门店"
					},
					{
						name: "input输入框特效-17"
					},
					{
						name: "graceui-alert带有动画的顶部消息框"
					},
					{
						name: "精简实用的tabs组件"
					},
					{
						name: "新能源车牌号键盘"
					},
					{
						name: "全局提醒-弹窗-popup-轻量简单美观弹窗-自动关闭-弹出"
					},
					{
						name: "bbs-countdown 倒计时组件"
					},
					{
						name: "cmd-transition复用动画切换组件"
					},
					{
						name: "min-Badge 徽标数,主要用于通知未读数的角标，提醒用户点击"
					},
					{
						name: "一系列基础组件"
					},
					{
						name: "min-action-sheet从底部弹出的模态框"
					},
					{
						name: "自动化索引列表,城市搜搜"
					},
					{
						name: "cmd-tool-bar导航栏工具栏组件"
					},
					{
						name: "步骤条，进度条"
					},
					{
						name: "类似于picker的多选免去滑动操作"
					},
					{
						name: "图片展示插件 安卓 IOS 微信小程序通用"
					},
					{
						name: "添加水印"
					},
					{
						name: "ImageCache 本地缓存image"
					},
					{
						name: "日历（停更）"
					},
					{
						name: "屏幕文字滚动效果"
					},
					{
						name: "wTable表格组件"
					},
					{
						name: "超级输入框，带校验，密码显隐，uni-app通用"
					},
					{
						name: "cmd-page-body使用底部导航栏内容页组件"
					},
					{
						name: "NoticeBar 通告栏 字体滚动 跑马灯"
					},
					{
						name: "看起来不算太糟糕的【通用】table组件"
					},
					{
						name: "仿支付宝时间选择组件"
					},
					{
						name: "自定义 toast 组件"
					},
					{
						name: "在整张页面中组织插画、图标、文字等内容，向用户反馈操作结果。(暂无信息等)"
					},
					{
						name: "拖动排序 drag-sorts"
					},
					{
						name: "善哉-抢购选项卡"
					},
					{
						name: "数据加载中组件 适用H5/APP/微信小程序"
					},
					{
						name: "countdown 倒计时-20页"
					},
					{
						name: "H5栅格布局"
					},
					{
						name: "简易的tab"
					},
					{
						name: "类似支付宝支付密码弹窗插件,代码简洁，兼容性强"
					},
					{
						name: "条形码生成器"
					},
					{
						name: "canvas手写功能"
					},
					{
						name: "图片瀑布流"
					},
					{
						name: "输入提示框"
					},
					{
						name: "美观的兑换按钮，带动画"
					},
					{
						name: "显示模态对话框"
					},
					{
						name: "drop-menu下拉菜单"
					},
					{
						name: "simple-network 监听网络状态"
					},
					{
						name: "cmd-notice-bar通知栏组件,通常用于系统提醒、活动提醒等通知"
					},
					{
						name: "通过属性设置可支持只读标签，也支持编辑标签。可动态添加、删除标签"
					},
					{
						name: "日期选择组件"
					},
					{
						name: "ButtonRipple--按钮波纹组件"
					},
					{
						name: "自定义验证码输入、密码输入使用"
					},
					{
						name: "slither 滑动操作"
					},
					{
						name: "全端兼容灯箱图片浏览-带开启关闭动画"
					},
					{
						name: "拖动滑块校验(验证码)"
					},
					{
						name: "适用于智能家居产品管理界面的组件格式-第22页"
					},
					{
						name: "借助 html2canvas 插件实现 的类似截图功能，同时引导用户长按保存截图至本地"
					},
					{
						name: "一个灵活且详解的弹层组件"
					},
					{
						name: "文字自动检索高亮补全，跟pc端的autocomplete一样"
					},
					{
						name: "用户可控制是否显示输入框标题，是否出现清除按钮，输入框状态"
					},
					{
						name: "QS-inputs 拆分版(输入手机号的表单)"
					},
					{
						name: "cmd-avatar头像组件-图片/图标/单字符"
					},
					{
						name: "模拟原生showModal的组件，调用风格和参数跟原生一致"
					},
					{
						name: "日期格式化、格式化数字显示、格式化金额、格式化星期、小写金额转大写、文件格式化"
					},
					{
						name: "底部上滑Dialog（已经有其他很好用的插件了，不维护了）"
					},
					{
						name: "价格组件"
					},
					{
						name: "simple-loading 自定义loading加载"
					},
					{
						name: "围棋棋盘组件"
					},
					{
						name: "超级简单小程序码的获取以及canvas绘制与保存为图片"
					},
					{
						name: "自定义sheet弹窗，css控制显示效果"
					},
					{
						name: "图片状态管理"
					},
					{
						name: "拖动滑块验证"
					},
					{
						name: "购物车使用数字输入框"
					},
					{
						name: "幕帘组件，可以用来放置广告提示内容"
					},
					{
						name: "glance图片表格增强型"
					},
					{
						name: "车牌号虚拟软键盘组件"
					},
					{
						name: "min-countdown支持重新设置倒计时版本"
					},
					{
						name: "Loading图-总有一款适合你"
					},
					{
						name: "这是一款popup弹窗容器组件，只负责弹窗的显示和关闭"
					},
					{
						name: "没有任何依赖原生的轮播插件"
					},
					{
						name: "时间选择组件"
					},
					{
						name: "基于 flex 封装的 vue 组件"
					},
					{
						name: "api封装audio音频组件"
					},
					{
						name: "移动app端模拟全键盘"
					},
					{
						name: "引入three.js，主要是个人有个动画需要处理"
					},
					{
						name: "计数器一般用于购物车"
					},
					{
						name: "水印添加（文字或图片）"
					},
					{
						name: "微信小程序自定义导航栏"
					},
					{
						name: "文字展开和收起，组件可根据自己实际需求进行DIY."
					},
					{
						name: "五种第三方广告布局组件 喜欢给点个赞吧"
					},
					{
						name: "QS-WavesButton 波纹按钮 2.0完善"
					},
					{
						name: "微信，支付宝，APP，通用骨架屏"
					},
					{
						name: "uLi-load-more 加载更多来源于官方组件"
					},
					{
						name: "小程序首次收藏提示"
					},
					{
						name: "action-sheet扩展版"
					},
					{
						name: "保存图片到相册"
					},
					{
						name: "底部弹出的侧面导航分类组件,内容可上下滑动"
					},
					{
						name: "主要用于数据加载和搜索加载提示"
					},
					{
						name: "小程序获取头像授权+绑定手机"
					},
					{
						name: "精简实用的弹框组件"
					},
					{
						name: "快速选择颜色插件，简单易用易修改"
					},
					{
						name: "发送异步请求时，自动切换可用状态、不可用状态、完成状态、失败状态"
					},
					{
						name: "在uni-app中实现文件上传按钮（全文件类型）"
					},
					{
						name: "纯CSS流星雨背景"
					},
					{
						name: "loading 插件 安卓 IOS 微信小程序通用"
					},
					{
						name: "日期时间Datetime"
					},
					{
						name: "自定义开关文字"
					},
					{
						name: "信息弹窗popup"
					},
					{
						name: "队列展示图片广告, 也可自定义其他内容"
					},
					{
						name: "多音频播放-基于uni-app开发的多音频播放组件"
					},
					{
						name: "时间日期选择器"
					},
					{
						name: "扩展官方button组件，增加了路由的功能"
					},
					{
						name: "自适应scroll"
					},
					{
						name: "智能温控开关"
					},
					{
						name: "页面漂浮物-28页"
					},
					{
						name: "瀑布流布局flex(横向数据)"
					},
					{
						name: "t-color-picker 颜色选择器"
					},
					{
						name: "图片选择器"
					},
					{
						name: "数字滚动"
					},
					{
						name: "分页"
					},
					{
						name: "Message 全局提醒"
					},
					{
						name: "slider-range滑块组件，用于进行区间选择"
					},
					{
						name: "向上滑动面板，可自定义"
					},
					{
						name: "仿微信标签添加根据空格逗号自动分割"
					},
					{
						name: "显示日历价格，输入选中日期"
					},
					{
						name: "瀑布流布局flex(纵向数据)"
					},
					{
						name: "点击弹出列表选择"
					},
					{
						name: "操作菜单优化版，支持副标题"
					},
					{
						name: "媒体图片显示组件,支持属性设置加载失败显示默认图片image"
					},
					{
						name: "根据个人需求自定义一个仪表盘，调用简单方便"
					},
					{
						name: "多文件上传插件"
					},
					{
						name: "flex栅格布局"
					},
					{
						name: "数据模型生成"
					},
					{
						name: "输入框列表填充"
					},
					{
						name: "图片视频选择，预览，删除，上传方法需要自己提供-30页"
					},
					{
						name: "基于uni-app微信小程序中使用的标签label选择"
					},
					{
						name: "支持异步调用的 switch 组件，增加了禁用状态颜色设置"
					},
					{
						name: "基于ColorUi的用户卡片"
					},
					{
						name: "此插件为ucharts的二次封装，旨在简化ucharts的使用过程！"
					},
					{
						name: "自定义底部导航栏"
					},
					{
						name: "基于uni-app canvas 手绘组件"
					},
					{
						name: "文件选择器（仅支持安卓）"
					},
					{
						name: "条形单项选择框"
					},
					{
						name: "简单的加载骨架占位符"
					},
					{
						name: "CC视频播放-31页"
					},
					{
						name: "自动显示加载图或文本的loading组件"
					},
					{
						name: "文本域提示-类似文本提示-form控件里面的文本域提示-蚁点"
					},
					{
						name: "花里胡哨的点击反馈组件"
					},
					{
						name: "可配置 拖拽"
					},
					{
						name: "图片错误替补"
					},
					{
						name: "渐变颜色条组件"
					},
					{
						name: "Css打字机效果"
					},
					{
						name: "此插件为小型迷你按钮！"
					},
					{
						name: "可以选择未来时间的预约时间选择，可以定义分钟的间隔，小时的区间！"
					}
					
				]
			};
		},
		onLoad() {
			// #ifdef APP-PLUS
			plus.nativeUI.showWaiting('加载中……');
			// #endif
		},
		onReady() {
			// #ifdef APP-PLUS
			plus.nativeUI.closeWaiting();
			// #endif
		},
		onShareAppMessage() {
			return {
				title: '欢迎体验uni-app',
				path: '/pages/tabBar/extUI/extUI'
			}
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '/pages/about/about'
			});
		},
		methods: {
			goDetailPage(path) {
				uni.navigateTo({
					url: '/pages/extUI/' + path + '/' + path
				});
			}
		}
	}
</script>

<style>
	page {
		height: auto;
		min-height: 100%;
	}

	.uni-card {
		box-shadow: none;
	}

	.uni-list:after {
		height: 0;
	}

	.uni-list:before {
		height: 0;
	}

	.uni-hello-text {
		word-break: break-all;
	}
</style>